<template>
  <div class="chat-container">
    <div class="chat-layout">
      <!-- 聊天列表 -->
      <div class="chat-sidebar">
        <ChatList />
      </div>
      
      <!-- 聊天窗口 -->
      <div class="chat-main">
        <ChatWindow :topic-title="topicTitle" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useChatStore } from '@/stores/chat'
import ChatList from './ChatList.vue'
import ChatWindow from './ChatWindow.vue'

const route = useRoute()
const chatStore = useChatStore()
const topicTitle = ref('')

// 处理URL参数，自动选择用户
onMounted(() => {
  const userId = route.query.userId as string
  const userName = route.query.userName as string
  const titleFromQuery = route.query.topicTitle as string
  
  if (userId && userName) {
    // 自动选择用户，但不立即发送消息
    chatStore.setCurrentChatUser({
      id: parseInt(userId),
      username: userName,
      real_name: userName,
      role: 'enterprise',
      online: true
    })
    
    // 设置课题标题，传递给ChatWindow组件
    if (titleFromQuery) {
      topicTitle.value = titleFromQuery
    }
  }
})
</script>

<style scoped>
.chat-container {
  height: 100%;
}

.chat-layout {
  display: flex;
  height: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-sidebar {
  width: 350px;
  border-right: 1px solid #e4e7ed;
  background: white;
}

.chat-main {
  flex: 1;
  background: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-layout {
    flex-direction: column;
  }
  
  .chat-sidebar {
    width: 100%;
    height: 40%;
    border-right: none;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .chat-main {
    height: 60%;
  }
}
</style>
